<template>
  <div>
    <Provide_Inject></Provide_Inject>
    <h2>{{ age }}</h2>
    <h2>{{ info }}</h2>
  </div>
</template>

<script>
import Provide_Inject from "@/components/Provide_Inject.vue";
import emitter from '@/mitt'
import { computed } from "@vue/reactivity";
export default {
  data() {
    return {
      name: 'zhangsan',
      age: 19,
      info: ''
    }
  },
  provide() {
    return {
      name: this.name,
      age: computed(() => this.age),  //使数据具备响应
      sex: '男'
    }
  },
  components: {
    Provide_Inject
  },
  created() {
    // 监听add事件
    // 事件发生后执行回调函数， 函数必须写成箭头函数
    emitter.on('add', () => {
      this.age++
    }),
      emitter.on('add2', info => {
        this.info = info
      })
  }
}
</script>

<style scoped>

</style>